<template>
    <div>
		<div class="container">
			<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
				<el-tab-pane label="人口数量" name="tab1">
					<el-card class="box-card">
				 		<el-table :data="tableData" border class="table" ref="multipleTable">
							<el-table-column prop="index" label="序号">
								<template slot-scope="scope">
									{{scope.$index+1}}
								</template>
							</el-table-column>
							<el-table-column prop="name" label="村名"></el-table-column>
							<el-table-column prop="num" label="人数"></el-table-column>
						</el-table>
						<div class="pagination">
							<el-pagination
								background
								layout="total, prev, pager, next"
								:current-page="pageIndex"
								:page-size="pageSize"
								:total="pageTotal"
								@current-change="pagination">
							</el-pagination>
						</div>
					</el-card>
				</el-tab-pane>
				
				<el-tab-pane label="其他统计" name="tab2">
					<el-card class="box-card">
						<div class="cate_list">
							<span class="cate_title">个人类别:</span>
							<div class="cate_sum">
								<div class="cate_item" v-for="(item,index) in totalData['cate']" :key="index">
									<span>{{item.key}}:</span>
									<span>{{item.value}}人</span>
								</div>
							</div>
						</div>
						<div class="cate_list">
							<span class="cate_title">人口增减:</span>
							<div class="cate_sum">
								<div class="cate_item">
									<span>新生:</span>
									<span>{{totalData.new}}人</span>
								</div>
								<div class="cate_item">
									<span>迁入:</span>
									<span>{{totalData.movein}}人</span>
								</div>
								<div class="cate_item">
									<span>迁出:</span>
									<span>{{totalData.moveout}}人</span>
								</div>
								<div class="cate_item">
									<span>死亡:</span>
									<span>{{totalData.die}}人</span>
								</div>
							</div>
						</div>
						<div class="cate_list">
							<span class="cate_title">政治面貌:</span>
							<div class="cate_sum">
								<div class="cate_item" v-for="(item,index) in totalData['politics']" :key="index">
									<span>{{item.key}}:</span>
									<span>{{item.value}}人</span>
								</div>
							</div>
						</div>
						<div class="cate_list">
							<span class="cate_title">宗教信仰:</span>
							<div class="cate_sum">
								<div class="cate_item" v-for="(item,index) in totalData['religion']" :key="index">
									<span>{{item.key}}:</span>
									<span>{{item.value}}人</span>
								</div>
							</div>
						</div>
						<div class="cate_list">
							<span class="cate_title">文化程度:</span>
							<div class="cate_sum">
								<div class="cate_item" v-for="(item,index) in totalData['culture']" :key="index">
									<span>{{item.key}}:</span>
									<span>{{item.value}}人</span>
								</div>
							</div>
						</div>
						<div class="cate_list">
							<span class="cate_title">老幼统计:</span>
							<div class="cate_sum">
								<div class="cate_item">
									<span>学龄前儿童:</span>
									<span>{{totalData.children}}人</span>
								</div>
								<div class="cate_item">
									<span>农退老人:</span>
									<span>{{totalData.old}}人</span>
								</div>
							</div>
						</div>
					</el-card>
				</el-tab-pane>
			</el-tabs>
		</div>
    </div>
	
</template>

<script>

export default {
    name: 'UserTotal',
    data() {
        return {
			activeName: 'tab1',
            tableData: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
			totalData:[]
        };
    },
    created() {
		this.getEmployed()
    },
    methods: {
        getEmployed() {
			let t = this
			t.$apiPost('User/numTotals', {page: this.pageIndex, size: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },  
		getTotal() {
			let t = this
			t.$apiPost('User/totals').then(res => {
				if(res.code == 1) {
					this.totalData = res.data
				}
			})
		},
		tabClick (e) {
			if(e.index == "0"){
				this.pageIndex = 1
				this.tableData = []
				this.getEmployed()
			}else{
				this.getTotal()
			}
			this.activeName = e.name
		},
		pagination (e) {
			this.pageIndex = e
			if(this.activeName == 'tab1') {
				this.getEmployed()
			} 
		}
    }
};
</script>
<style scoped>
.cate_list{
	margin: 20px auto;
}
.cate_title{
	margin-bottom: 20upx;
}
.cate_sum{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.cate_item{
	display: flex;
	align-items: center;
	margin: 10px;
	font-size: 14px;
}
.goNew{
	color: #2e6bd9;
	cursor: pointer;
}
.handle-box {
    margin-bottom: 10px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr5{
	margin-right: 1px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
